<template>
	<view class="container">
		<view class="content">
			<view class="top">
				<text class="h2">宿舍用电补贴</text>
			</view>

			<form class="middle">
				<!-- 门牌 -->
				<view class="form">
					<text class="form-field">宿舍门牌:</text>
					<input type="text" :value="data1.SS_MC" name="houseNumber" disabled />
				</view>
				<!-- 用电余量 -->
				<view class="form">
					<text class="form-field">补贴电量:</text>
					<input type="text" :value="data1.subsidyNumber" name="electricityLeft" disabled />
				</view>
				<!-- 补贴电量 -->
				<view class="form">
					<text class="form-field">补贴金额:</text>
					<input type="text" :value="data1.subsidyMoney" name="subsidyAmount" disabled />
				</view>
				<!-- 电表状态 -->
				<view class="form">
					<text class="form-field">电表状态:</text>
					<input type="text" :value="getStatusText()" name="meterStatus" disabled />
				</view>


				<view>
					<text style="color: red;">请确认信息无误后领取补贴</text>
				</view>

				<view>
					<button class="btn" @click="reback">领取</button>
				</view>
			</form>

			<!-- 显示数据采集时间 -->
			<view class="readTime">
							<text>数据采集时间: {{ currentYearMonth }}</text>
				<text style="font-size: small">本系统采集记录存在延迟,具体情况以电表为准。</text>
			</view>
		</view>

		<!-- 底部提示 -->
		<view class="bottom">
			<text>该部分宿舍未支持在线领取</text>
			<text>请移步到服务中心领取</text>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from "../../utils/request.js";
	export default {
		data() {
			return {
				data1: [],
				currentYearMonth: ''
			};
		},
		onShow() {
			this.fetchFormData();
			this.getCurrentYearMonth();
		},
		methods: {
			fetchFormData() {
				ajax("/api/meter/getmetersubsidy", "POST", {
						ss_mc: uni.getStorageSync('SS_MC'),
					})
					.then((data) => {
						console.log("成功补贴数据:", data);
						this.data1 = data.data.metersubsidyrecord;
						console.log("补贴数据有:", this.data1);
					})
					.catch((error) => {
						console.error("请求失败:", error);
					});
			},
			getStatusText() {
				// console.log("数据是:", this.data1.state)
				if (this.data1.state == 1) {
					return "已领取";
				} else if (this.data1.state == 0) {
					return "未领取";
				} else {
					return "未知";
				}
			},
			getCurrentYearMonth() {
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1; // getMonth() 返回 0-11，需要加1
				this.currentYearMonth = `${year}年${month}月`;
			},
			reback() {
				setTimeout(() => {
					uni.showModal({
						title: '领取成功',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								// 成功后导航回上一页
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								// 失败后显示提示
								uni.showToast({
									title: '领取失败',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}, 1000); // 延迟1000毫秒后显示模态对话框
			},
		},
	};
</script>

<style>
	.container {
		height: 100vh;
		min-height: 100vh;
		width: 100%;
		background: linear-gradient(to bottom right, #39a755, #2ba245);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		flex: 1;
		width: 50%;
	}

	.top {
		display: flex;
		justify-content: center;
	}

	.h2 {
		margin: 0;
		color: #fff;
		font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	}

	.middle {
		display: flex;
		align-items: center;
		height: 30%;
		flex-direction: row;
		justify-content: center;
	}

	.form-field {
		padding-left: 0.5rem;
		width: 10rem;
		display: flex;
		justify-content: center;
	}

	form input {
		border: none;
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}

	.form {
		height: 30px;
		line-height: 30px;
		margin: 10% auto;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
	}

	input:focus {
		outline: none;
	}

	.btn {
		height: 40px;
		background-color: rgba(255, 255, 255, 0.4);
		color: #fff;
		font-size: large;
		box-shadow: none;
		border-color: transparent;
	}

	.readTime {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.readTime text {
		text-align: center;
	}

	.bottom {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: smaller;
		font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	}
</style>
